<template>
  <div class="mine">
    <my-head title="个人中心" :back="false"></my-head>
    <div class="mine-top">
      <img
        :src="require('@/assets/images/Pikachu.jpg')"
        alt=""
        class="avatar-icon"
      />
      <h2 class="nick-name" v-if="userInfo">
        {{ userInfo.username }} / {{ userInfo.phone }}
      </h2>
      <h2 class="nick-name" v-else @click="gotoWhere({ name: 'login' })">
        立即登录
      </h2>
    </div>
    <ul class="my-order-tab">
      <li data-enter-time="1645846747" data-click-fun="track_f_134000">
        <img
          src=""
          width="26px"
          height="26px"
          alt=""
        />
        <div class="common-p">电影订单</div>
      </li>
      <li data-enter-time="1645846747" data-click-fun="track_f_759982">
        <img
          src=""
          width="26px"
          height="26px"
          alt=""
        />
        <div class="common-p">商品订单</div>
      </li>
    </ul>
    <van-cell-group class="infolist">
      <template v-if="userInfo">
        <van-cell title="我的关注" value="5" icon="fire-o" is-link />
        <van-cell title="我的点赞" value="2" icon="like-o" is-link />
        <van-cell title="我的收藏" value="1" icon="star-o" is-link />
        <van-cell title="个人信息" icon="friends-o" is-link />
        <van-cell title="余额" value="200" icon="gem-o" is-link />
        <van-cell title="购物车" icon="cart-o" is-link />
        <van-cell title="历史记录" icon="clock-o" is-link />
        <van-cell
          title="修改密码"
          :to="{ name: 'changepass' }"
          icon="smile-o"
          is-link
        />
      </template>
      <van-cell title="设置" icon="setting-o" is-link />
      <van-cell title="清除缓存" @click="clearCache" icon="setting-o" is-link />
    </van-cell-group>
    <div class="mbtn" v-if="userInfo">
      <van-button class="logoutbtn" @click="logouAction">退出登录</van-button>
    </div>
    <van-overlay :show="show">
      <div class="probox">
        <van-circle
          v-if="show"
          v-model="cache"
          :stroke-width="60"
          :rate="100"
          :speed="33"
          :text="cache + ' %'"
        />
      </div>
    </van-overlay>
  </div>
</template>


<script>
export default {
  data() {
    return {
      show: false,
      cache: 0,
    };
  },
  watch: {
    cache(v) {
      if (v == 100) {
        this.show = false;
        this.cache = 0;
        this.$toast("缓存清除完毕!");
      }
    },
  },
  methods: {
    clearCache() {
      this.cache = 0;
      this.show = true;
    },
    logouAction() {
      this.$dialog
        .confirm({
          title: "操作提示",
          message: "你真的要退出登录吗?",
        })
        .then(() => {
          this.changeUserInfo(null);
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.van-overlay {
  z-index: 1001;
  .probox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    ::v-deep .van-circle__text {
      color: #fff !important;
      font-weight: bold;
    }
    .pro {
      position: relative;
    }
  }
}

.mine {
  width: 100%;
  background: #f4f4f4;
  height: 100vh;
  overflow: auto;
  &-top {
    text-align: center;
    margin-top: -44px;
    height: 200px;
    padding-left: 22px;
    padding-top: 64px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    .avatar-icon {
      width: 63px;
      height: 63px;
      border-radius: 35px;
      margin-right: 20px;
      border: 2px solid #fff;
    }
    .nick-name {
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .my-order-tab {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    font-size: 13px;
    padding: 0;
    height: 79px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    li {
      flex: 1;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      img {
        width: 26px;
        height: 26px;
      }
      .common-p {
        color: #797d82;
      }
    }
  }

  .mbtn {
    margin: 16px;
    .logoutbtn {
      width: 100%;
    }
  }
}
</style>